<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性的简写</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    姓：<input type="text" v-model="firstName"><br>
    名: <input type="text" v-model="lastName" ><br>
    全名: <span>{{fullname}}</span>

</div>
</body>
<!--
    computed和watch的区别：
        1.computed能完成的，watch都可以
        2.watch能完成的，computed不一定能完成，例如：watch可以进行异步操作
    两个重要的小原则：
        1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
        2.所有不被Vue管理的函数(定时器的回调函数，ajax的回调函数，promise的回调函数等)，最好写成箭头函数，
        这样this的指向才是vm或组件实例对象



-->
<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
            fullname:'张-三'
        },
        watch:{
           firstName(newValue,oldValue){
            setTimeout(
                () =>
                {this.fullname = newValue+'-'+this.lastName}
                ,1000)
           },
           lastName(newValue,oldValue){
            this.fullname = this.firstName()+'-'+newValue
           }
        }




    })
</script>
</html>